const {
	createApp
} = Vue;
const app = createApp({
	data() {
		return {
			goods,
			delevaryPrice: 5,
			liftThreShold: 30,
			addIconInfo:{
				show:false,
				point:{
					x:0,y:0
				}
			}
		}
	},
	methods: {
		inerses(val,el) {
			this.toJump(el)
			val.chooseNum++
			val.allPrice = val.chooseNum * val.price
		},
		dserse(val) {
			if (val.chooseNum <= 0) {
				return;
			}
			val.chooseNum--
			val.allPrice = val.chooseNum * val.price
		},
		//清除小球动画并添加购物车动画
		addIconTransitionend(){
			this.addIconInfo.show = false;
			this.$refs.footerCar.classList.add('animate')
		},
		//清除购物车动画
		carAnimateEnd(){
			this.$refs.footerCar.classList.remove('animate')
		},
		toJump(el){
			this.addIconInfo.show = false;
			setTimeout(()=>{
				this.addIconInfo.show = true;
				//起始位置
				const startRect = el.target.getBoundingClientRect();
				this.addIconInfo.point.x = startRect.x + startRect.width/2
				this.addIconInfo.point.y = startRect.y + startRect.height/2
			},0)
			//终点位置
			setTimeout(()=>{
				const endRect =this.$refs.footerCar.getBoundingClientRect();
				this.addIconInfo.point.x = endRect.x + endRect.width/2
				this.addIconInfo.point.y = endRect.y + endRect.height/2
			},1)
		}
	},
	mounted() {
		this.goods = this.goods.map(val => {
			return {
				...val,
				chooseNum: 0,
				allPrice: 0
			}
		})
	},
	computed: {
		payInfo() {
			let sumPrice = 0;
			let allNum = 0;
			let threSholdPrice = 0;
			this.goods.map(val => {
				sumPrice += val.allPrice;
				allNum += val.chooseNum;
				threSholdPrice = this.liftThreShold - sumPrice
			})
			return {
				payPrice: sumPrice,
				allNum,
				threSholdPrice
			}
		},
		//自动渲染动画位置
		addIconStyle(){
			return{
				divStyle:{
					transform:`translateX(${this.addIconInfo.point.x}px)`
				},
				iconStyle:{
					transform:`translateY(${this.addIconInfo.point.y}px)`
				}
			}
		}
	}
})
const vm = app.mount("#app")